<template>
  <div class="timeLimit">
    <s-title text="事项承诺时限分布" />
    <div id="timeLimitChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "timeLimit",
  components: {
    sTitle,
  },
  data() {
    return {};
  },
  mounted() {
    let colors = ["#00c8ff", "#36e7fa", "#0064ff", "#0086ff", "#00a4ff"];
    axios.get(this.$serverIp + "getTimeLine").then((res) => {
      var echartData = [];
      for (let i = 0; i < res.data.length; i++) {
        echartData.push({
          value: res.data[i].zb,
          name: res.data[i].mc,
          itemStyle: {
            normal: {
              color: colors[i % 5],
            },
          },
        });
      }
      this.setEchartHandle(echartData);
    });
  },
  methods: {
    setEchartHandle(data) {
      let _echarts = this.$echarts.init(
        document.getElementById("timeLimitChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let option = {
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: [0, 75],
            center: ["50%", "35%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 0,
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 20,
              },
            },
            label: {
              normal: {
                formatter: function (params) {
                  return (
                    "{normal|" +
                    params.name +
                    "}  {value|" +
                    params.value +
                    "%}"
                  );
                },
                rich: {
                  normal: {
                    color: "#fff",
                    fontSize: 14,
                  },
                  value: {
                    color: "#00c8ff",
                    fontSize: 14,
                  },
                },
              },
            },
            data: data,
          },
        ],
      };
      _echarts.setOption(option);
    },
  },
};
</script>
<style scoped>
.timeLimit {
  margin-top: 10px;
}
#timeLimitChart {
  width: 100%;
  height: 30vh;
  margin-top: 10px;
}
</style>
 